<script lang="ts" setup>
import { reactive, ref, computed, onMounted } from 'vue';
// motion过渡动画
import Motion from './utils/motion';
import type { FormInstance, FormRules } from 'element-plus';
// 白天、黑夜icon图标
import { Sunny, MoonNight } from '@element-plus/icons-vue';
// 注册
import Register from './components/register.vue';
// 忘记密码
import Forget from './components/forget.vue';
// 手机登录
import Phone from './components/phone.vue';
// 二维码登录
import Qrcode from './components/qrcode.vue';
// 四位随机验证码
import Captcha from './components/captcha.vue';
// 路由
import router from '@/router';
// useUserStoreHook
import { useUserStoreHook } from '@/store/modules/user';
// 中英文切换
import { useI18n } from 'vue-i18n';
// 注：虽然已经全局注册了$t, 但是此处 还是需要引入t，用来兼容 rules规则
const { t, locale } = useI18n();

interface LoginForm {
	username: string;
	password: string;
	qrcode: string;
}
const loginFormRef = ref<FormInstance>();
const loginForm = reactive<LoginForm>({
	username: '', // 账号
	password: '', // 密码
	qrcode: '' // 验证码
});

const remember = ref<boolean>(false); //记住密码是否勾选，true:勾选，false:未勾选

const rules = reactive<FormRules<LoginForm>>({
	username: [{ required: true, message: t('login.usernameReg'), trigger: 'blur' }],
	password: [{ required: true, message: t('login.passwordReg'), trigger: 'blur' }],
	qrcode: [{ required: true, message: t('login.verifyCodeReg'), trigger: 'blur' }]
});

const submitForm = async (formEl: FormInstance | undefined) => {
	router.push('/home');
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			console.log('submit!');
		} else {
			console.log('error submit!', fields);
		}
	});
};

// const resetForm = (formEl: FormInstance | undefined) => {
// 	if (!formEl) return;
// 	formEl.resetFields();
// };

// 是否开启暗黑模式
const darklyValue = ref<boolean>(false);
/**
 * 点击切换白天/黑夜模式
 * @param val true-开启暗黑模式 false-取消暗黑模式
 */
const handleDarkly = (val: any) => {
	let html = document.documentElement;
	//  //判断添加不添加暗黑模式
	val ? (html.className = 'dark') : (html.className = '');
};

// 当前语言是否为中文
const isChinese = ref(true);
const changeLang = (lang: string) => {
	//控制那个语言按钮被选中
	lang === 'zh' ? (isChinese.value = true) : (isChinese.value = false);
	locale.value = lang;
	// 持久化，存储当前语言是中文还是英文
	localStorage.setItem('lang', lang);
};

// 动态展示当前表单：0/1/2/3/4=> 注册/忘记密码/手机登录/二维码登录
const currentPage = computed(() => {
	return useUserStoreHook().currentPage;
});

onMounted(() => {
	const lsLocale = localStorage.getItem('lang') || '';
	isChinese.value = lsLocale === 'zh';
});
</script>
<template>
	<div class="login-container scrollbar-box">
		<!-- 顶部切换模块 -->
		<div class="top-box flex-bc">
			<!-- 白天/黑夜模式切换 -->
			<el-switch
				v-model="darklyValue"
				:active-icon="Sunny"
				:inactive-icon="MoonNight"
				class="mt-2"
				inline-prompt
				style="margin-right: 10px"
				@change="handleDarkly" />

			<!-- 中/英文切换 -->
			<el-dropdown trigger="click">
				<span class="el-dropdown-link">
					<svg-icon class="svg-language" icon-class="login-language" />
				</span>
				<template #dropdown>
					<el-dropdown-menu>
						<!-- 简体中文 -->
						<el-dropdown-item
							:class="isChinese ? 'item-active' : ''"
							class="language-item"
							@click="changeLang('zh')">
							<svg-icon v-show="isChinese" class="svg-language-item" icon-class="login-right" />
							<span>简体中文</span>
						</el-dropdown-item>

						<!-- 英文 -->
						<el-dropdown-item
							:class="!isChinese ? 'item-active' : ''"
							class="language-item"
							@click="changeLang('en')">
							<svg-icon v-show="!isChinese" class="svg-language-item" icon-class="login-right" />
							<span>English</span>
						</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>

		<!-- 页面主体 -->
		<div class="main-box flex-ac">
			<!-- 左边svg轮播 -->
			<svg-icon class="left-svg" icon-class="login-bg-1" />

			<!-- 右侧登录表单 -->
			<div class="login-box flex items-center">
				<div class="login-form">
					<!-- 项目logo -->
					<svg-icon class="logo-svg" icon-class="logo" />

					<!-- 项目名称 -->
					<Motion>
						<h2 class="mt-6 login-title">VITALITY-ADMIN</h2>
					</Motion>

					<!-- 登录表单 -->
					<el-form v-if="currentPage === 0" ref="loginFormRef" :model="loginForm" :rules="rules">
						<!-- 账号 -->
						<Motion :delay="100">
							<el-form-item
								:rules="[
									{
										required: true,
										message: $t('login.usernameReg'),
										trigger: 'blur'
									}
								]"
								class="mt-6"
								prop="username">
								<el-input
									v-model="loginForm.username"
									:placeholder="$t('login.username')"
									clearable>
									<template #prefix>
										<svg-icon class="login-iconSize" icon-class="login-account" />
									</template>
								</el-input>
							</el-form-item>
						</Motion>

						<!-- 密码 -->
						<Motion :delay="150">
							<el-form-item
								:rules="[
									{
										required: true,
										message: $t('login.passwordReg'),
										trigger: 'blur'
									}
								]"
								class="mt-6"
								prop="password">
								<el-input
									v-model="loginForm.password"
									:placeholder="$t('login.password')"
									clearable
									show-password>
									<template #prefix>
										<svg-icon class="login-iconSize" icon-class="login-password" />
									</template>
								</el-input>
							</el-form-item>
						</Motion>

						<!-- 验证码 -->
						<Motion :delay="200">
							<el-form-item
								:rules="[
									{
										required: true,
										message: $t('login.verifyCodeReg'),
										trigger: 'blur'
									}
								]"
								class="mt-6 between-box"
								prop="qrcode">
								<el-input
									v-model="loginForm.qrcode"
									:placeholder="$t('login.verifyCode')"
									clearable>
									<template #prefix>
										<svg-icon class="login-iconSize" icon-class="login-captcha" />
									</template>
								</el-input>
								<Captcha />
							</el-form-item>
						</Motion>

						<!-- 记住密码/忘记密码 -->
						<Motion :delay="250">
							<el-form-item class="mt-6 between-box">
								<!-- 记住密码 -->
								<el-checkbox v-model="remember">{{ $t('login.remember') }}</el-checkbox>

								<!-- 忘记密码 -->
								<el-button
									class="forget"
									link
									type="primary"
									@click="useUserStoreHook().SET_CURRENTPAGE(2)">
									{{ $t('login.forget') }}
								</el-button>
							</el-form-item>
						</Motion>

						<!-- 登录按钮 -->
						<Motion :delay="300">
							<el-form-item>
								<el-button class="w-full" type="primary" @click="submitForm(loginFormRef)">
									{{ $t('login.login') }}
								</el-button>
							</el-form-item>
						</Motion>

						<!-- 其他登录方式 -->
						<Motion :delay="350">
							<el-form-item class="between-box">
								<!-- 手机登录 -->
								<el-button class="flex-size" @click="useUserStoreHook().SET_CURRENTPAGE(3)">
									{{ $t('login.phoneLogin') }}
								</el-button>
								<!-- 二维码登录 -->
								<el-button class="flex-size" @click="useUserStoreHook().SET_CURRENTPAGE(4)">
									{{ $t('login.qRCodeLogin') }}
								</el-button>
								<!-- 注册 -->
								<el-button class="flex-size" @click="useUserStoreHook().SET_CURRENTPAGE(1)">
									{{ $t('login.register') }}
								</el-button>
							</el-form-item>
						</Motion>

						<!-- 分割线 -->
						<Motion :delay="400">
							<el-form-item class="button-list">
								<el-divider>{{ $t('login.thirdLogin') }}</el-divider>
							</el-form-item>
						</Motion>

						<!-- 底部其他登录方式 -->
						<Motion :delay="450">
							<el-form-item class="other-methods between-box">
								<!-- 微信 -->
								<svg-icon class="icon-class" icon-class="login-method-wechat" />
								<!-- QQ -->
								<svg-icon class="icon-class" icon-class="login-method-qq" />
								<!-- 微博 -->
								<svg-icon class="icon-class" icon-class="login-method-weibo" />
								<!-- 支付宝 -->
								<svg-icon class="icon-class" icon-class="login-method-alipay" />
							</el-form-item>
						</Motion>
					</el-form>

					<!-- 注册 -->
					<Register v-if="currentPage == 1" class="w-full" />
					<!-- 忘记密码 -->
					<Forget v-if="currentPage == 2" class="w-full" />
					<!-- 手机登录 -->
					<Phone v-if="currentPage == 3" class="w-full" />
					<!-- 二维码登录 -->
					<Qrcode v-if="currentPage == 4" class="w-full" />
				</div>
			</div>
		</div>

		<!-- 底部背景图 -->
		<svg-icon class="footer-bg" icon-class="login-footer-bg" />
	</div>
</template>
<style lang="scss">
@import url('@/style/login.scss');
</style>
